* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #868686;
	height: 100vh;
	background: url(../img/bg.jpg) no-repeat;
}

.container {
    position: relative;
	padding: 1px;

    .box {
        width: 480px;
        height: 580px;
        background-color: #fff;
        margin: 100px auto 0;
        border-radius: 10px;
        position: relative;

        .switch_button {
            position: absolute;
			z-index: 10;
            color: #fff;
            width: 150px;
            height: 150px;
            background-color: #ed2553;
            border-radius: 50%;
            // right: -75px;
			right: 0;
			transform: translate(50%,-50%);
            top: 20%;
            text-align: center;
            line-height: 140px;
            font-size: 50px;
            cursor: pointer;
			// transition: all 1s;
        }

        &:before {
            content: "";
            width: 96%;
            height: 30px;
            border-radius: 10px;
            position: absolute;
            top: -10px;
            background: rgba(255, 255, 255, .6);
            left: 10px;
            z-index: -1;
        }

        .title {
            width: 100%;
            float: left;
            height: 50px;
            left: 50px;
            top: 50px;
            line-height: 50px;
            font-size: 34px;
            font-weight: 700;
            color: #ED2553;
            position: relative;

            &:before {
                content: "";
                width: 5px;
                height: 100%;
                position: absolute;
                top: 0;
                left: -50px;
                background: #ED2553;
            }
        }
		
		form.login{
			position: relative;
			flex-wrap: wrap;
			top: 130px;
			left: 0;
			margin: 0 auto;
			width: 80%;
			display: flex;
		}
        .username,.password {
			width: 100%;
			position: relative;
			margin-bottom: 40px;


            h5 {
				position: absolute;
				transform: translateY(-80%);
                font-size: 28px;
                font-weight: 100;
                cursor: pointer;
            }

            input {
				height: 0;
                width: 100%;
                font-size: 24px;
				outline: none;
                border: 0;
            }

            .span {
                display: block;
                width: 0;
                height: 3px;
                background-color: #ed2553;
            }
        }

        .password {
			margin-bottom: 0;
		}
			// width: 100%;
			// position: relative;

   //          h5 {
			// 	position: absolute;
			// 	transform: translateY(-80%);
   //              font-size: 28px;
   //              font-weight: 100;
   //              cursor: pointer;

   //          }

   //          input {
   //             height: 0;
   //             width: 100%;
   //             font-size: 24px;
   //             outline: none;
			//    border: 0;

   //          }

   //          .span {
   //              display: block;
   //              width: 0;
   //              height: 3px;
   //              background-color: #ed2553;
   //          }

        .btn {
            margin: 100px auto 0;
            width: 200px;
            height: 60px;
            border: 3px solid #ccc;
            line-height: 50px;
            text-align: center;
            color: #999;
            cursor: pointer;
            font-size: 24px;
			transition: all 0.8s;
			&:hover{
				border-color: #ed2553;
				color: #ed2553;
			}
        }

        .forgetpwd {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin: 20px auto;
            color: #99a3b3;
            cursor: pointer;

        }
    }

    .redBox {
        width: 500px;
        height: 580px;
        background-color: #ED2553;
        margin: -570px auto;
        // margin: 0 auto;
        border-radius: 10px;
        position: relative;
		z-index: 15;
        display: none;

        .switch_btn {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
			transform: translate(50%,-50%);
            font-size: 50px;
            color: #fff;
			text-align: center;
			line-height: 100px;
            // left: 47%;
			right: 50%;
            top: 50%;
            cursor: pointer;
            z-index: 5;
        }

        .title {
            width: 100%;
            float: left;
            height: 50px;
            left: 50px;
            top: 0px;
            line-height: 50px;
            font-size: 34px;
            font-weight: 700;
            color: #fff;
            position: relative;

            &:before {
                content: "";
                width: 5px;
                height: 100%;
                position: absolute;
                top: 0;
                left: -50px;
                background: #fff;
            }
        }
		
		form.reg{
			position: relative;
			flex-wrap: wrap;
			top: 80px;
			left: 0;
			margin: 0 auto;
			width: 80%;
			display: flex;
		}

        .regusername,.regpassword,.okpassword {
			width: 100%;
			position: relative;
			margin-bottom: 60px;
			
            h5 {
            	position: absolute;
            	transform: translateY(-100%);
                font-size: 28px;
                font-weight: 100;
                cursor: pointer;
				color: white;
            }
            
            input {
            	height: 0;
                width: 100%;
                font-size: 24px;
            	outline: none;
                border: 0;
            }

            .span {
                display: block;
                width: 0;
                height: 3px;
                background-color: transparent;
            }
        }

        // .regpassword {
        //     width: 100%;
        //     position: relative;
        //     margin-bottom: 60px;

        //     h5 {
        //     	position: absolute;
        //     	transform: translateY(-100%);
        //         font-size: 28px;
        //         font-weight: 100;
        //         cursor: pointer;
        //     }
            
        //     input {
        //     	height: 0;
        //         width: 100%;
        //         font-size: 24px;
        //     	outline: none;
        //         border: 0;
        //     }
            

        //     .span {
        //         display: block;
        //         width: 0;
        //         height: 3px;
        //         background-color: transparent;

        //     }
        // }

        .okpassword {
           margin-bottom: 0;
        }

        .register {
			bottom: 10px;
            width: 300px;
            height: 60px;
            background-color: #fff;
            margin: 60px auto;
            font-size: 24px;
            color: #ccc;
            text-align: center;
            line-height: 60px;
            color: #ed2553;
            cursor: pointer;
        }
    }
}